<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="lagou_Boot/css/bootstrap.min.css">
    <title>Document</title>
</head>

<body style="padding:30px;">

    <form class="form-inline">
        <div class="form-group">
            <!-- 新增按钮采用模态框进行员工信息的输入 -->
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="add" onclick="ch(1)">新增</button>
            <button type="button" class="btn btn-primary" id="del">删除</button>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="update" onclick="ch(2)">编辑</button>
            <button type="button" class="btn btn-primary" onclick="ch(3)">查询</button>
        </div>
        <div class="form-group">
            <input type="text" class="from-control" placeholder="按工号查询" id="inqueryId">
        </div>
        <div class="form-group">
            <input type="text" class="from-control" placeholder="按姓名查询" id="inqueryName">
        </div>
    </form>

    <!-- 声明定义模态框组件 -->
    <div class="modal" id="myModal" data-backdrop="static">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 1.框的标题 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">请输入员工信息</h4>
                </div>
                <!-- 2.框内信息 -->
                <div class="modal-body">
                    <label>工号</label>
                    <input type="text" id="id" placeholder="请输入工号">
                    <hr>
                    <label>姓名</label>
                    <input type="text" id="name" placeholder="请输入姓名">
                    <hr>
                    <label>性别</label>
                    <input type="text" id="sex" placeholder="请输入性别">
                    <hr>
                    <label>密码</label>
                    <input type="text" id="password" placeholder="请输入密码">
                    <hr>
                    <label>年龄</label>
                    <input type="text" id="age" placeholder="请输入年龄">
                    <hr>
                    <label>出生日期</label>
                    <input type="text" id="birthday" placeholder="请输入出生日期">
        
                </div>
                <!-- 3.框的按钮 -->
                <div class="modal-foter" style="float:right">
                    <button class="btn btn-info" onclick="update()">确定</button>
                    <button class="btn btn-warning" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 全部员工信息 -->
    <table class="table table-responsive">
        <!-- 标题 -->
        <thead>
            <tr>
                <th>序列</th>
                <th>工号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>密码</th>
                <th>年龄</th>
                <th>出生日期</th>
            </tr>
        </thead>
        <!-- 信息条目 -->
        <tr class="info" name="item">
            <td><input type="radio" name="num"></td>
            <td name="userId">1001</td>
            <td name="userName">张三</td>
            <td name="userSex">女</td>
            <td name="userPassword">1234</td>
            <td name="userAge">29</td>
            <td name="userBirthday">1991-1-1</td>
        </tr>
        <tr class="warning" name="item">
            <td><input type="radio" name="num"></td>
            <td name="userId">1002</td>
            <td name="userName">李四</td>
            <td name="userSex">男</td>
            <td name="userPassword">1234</td>
            <td name="userAge">28</td>
            <td name="userBirthday">1992-2-2</td>
        </tr>
        <tr class="info" name="item">
            <td><input type="radio" name="num"></td>
            <td name="userId">1003</td>
            <td name="userName">王五</td>
            <td name="userSex">女</td>
            <td name="userPassword">1234</td>
            <td name="userAge">27</td>
            <td name="userBirthday">1993-3-3</td>
        </tr>
        <tr class="warning" name="item">
            <td><input type="radio" name="num"></td>
            <td name="userId">1004</td>
            <td name="userName">赵六</td>
            <td name="userSex">女</td>
            <td name="userPassword">1234</td>
            <td name="userAge">26</td>
            <td name="userBirthday">1994-4-4</td>
        </tr>
    </table>

    
    <!-- 引入js -->
    <script src="lagou_Boot/js/jquery-3.3.1.min.js"></script>
    <script src="lagou_Boot/js/bootstrap.min.js"></script>
    
    <script>
        Index = 0;
        function ch(i){
            Index = i;
            ex();
            if(Index == 3){
                inquery();
            }
        }
        // 添加员工信息
        function update(){
            var id = $("#id").val();
            var name = $("#name").val();
            var sex = $("#sex").val();
            var password = $("#password").val();
            var age = $("#age").val();
            var birthday = $("#birthday").val();

            // //将数据整合成一个tr
            var list = "";
            list += '<td><input type="radio" name="num"></td>';
            list += '<td name="userId">'+ id +'</td>';
            list += '<td name="userName">'+ name +'</td>';
            list += '<td name="userSex">'+ sex +'</td>';
            list += '<td name="userPassword">'+ password +'</td>';
            list += '<td name="userAge">'+ age +'</td>';
            list += '<td name="userBirthday">'+ birthday +'</td>';
            var sum = '<tr class="info" name="item">' + list + '</tr>';
            if(Index ==1 ){
                //将新的节点添加到最后一个节点的后面
                $("tr:last").after(sum);                
            }else if(Index ==2 ){
                var num = document.getElementsByName("num");
                for(var i=0;i<num.length;i++){
                    if(num[i].checked){
                        //替换节点
                        $("table").find("tr:eq("+(i+1)+")").replaceWith(sum);
                    }
                }
            }
        }
        //查询员工信息 通过工号或姓名
        function inquery(){
            var num = document.getElementsByName("item");
            var inqueryId = document.getElementById("inqueryId").value;
            var inqueryName = document.getElementById("inqueryName").value;
            // console.log(usersName[1]);
            // alert(usersName[1].text());
            //alert($("table").find('tr:eq(1)').find('td:eq(1)').text());
            for(var i=0;i<num.length;i++){
                var userId = $("table").find('tr:eq('+(i+1)+')').find('td:eq(1)').text();
                var userName = $("table").find('tr:eq('+(i+1)+')').find('td:eq(2)').text();
                var userSex = $("table").find('tr:eq('+(i+1)+')').find('td:eq(3)').text();
                var userPassword = $("table").find('tr:eq('+(i+1)+')').find('td:eq(4)').text();
                var userAge = $("table").find('tr:eq('+(i+1)+')').find('td:eq(5)').text();
                var userBirthday = $("table").find('tr:eq('+(i+1)+')').find('td:eq(6)').text();
                if(userId == inqueryId || userName == inqueryName){
                    hid(i);
                }
                
            }
        }
        //显示条目函数
        function ex(){
            var num = document.getElementsByName("item");
            for(var i=0;i<num.length;i++){
                $("table").find('tr:eq('+(i+1)+')').show();
            }
        }
        //隐藏条目函数
        function hid(index){
            var num = document.getElementsByName("item");
            for(var i=0;i<num.length;i++){
                if(i!=index){
                    $("table").find('tr:eq('+(i+1)+')').hide();
                }
            }
        }

        // 删除员工信息
        $("#del").click(function(){
            ex();
            var num = document.getElementsByName("num");
            for(var i=0;i<num.length;i++){
                if(num[i].checked){
                    $("table").find("tr:eq("+(i+1)+")").remove();
                }
            }
        });
    </script>

    
</body>
</html>